<template>
    <view class="page">
        <!-- 删除弹窗 -->
        <view class="delete_box" ref="diaLogPop" v-if="show">
            <view class="bg"></view>
            <view class="delete_model bd-r40">
                <view class="ft-32 c-33 fw-800 mt-30">{{ title }}</view>
                <view class="c-99 ft-28 text pd-30">
                    <!-- <view v-html="content" style="height: 100px;"></view> -->
                    <rich-text style="height: 100%;width: 100%;" :nodes="content"></rich-text>

                </view>
                <view class="btn_model flex-eve">
                    <view class="btn" @click="cancel">{{ cancelText }}</view>
                    <view class="btn sunbmit" @click="submit()">{{ submitText }}</view>
                </view>
            </view>
        </view>
    </view>

</template>

<script setup lang="js">
import { reactive, ref } from 'vue';
// const { option, title, content, show } = defineProps(['title', 'content', 'show', 'option'])
const { option, title, content, show } = defineProps({
    title: {
        type: String,
        default: () => ('')
    },
    content: {
        type: String,
        default: () => ('')
    },
    show: {
        type: Boolean,
        default: () => (false)
    },
    cancelText: {
        type: String,
        default: () => ('取消')
    },
    submitText: {
        type: String,
        default: () => ('确定')
    },
})
let emit = defineEmits(['confirm', 'cancel'])


// 删除
const showDialog = ref(false)
const open = () => {
    // showDialog.value = true

}
const cancel = () => {
    // show.value = false
    emit('cancel')


}
// 删除提交
const submit = () => {
    // 调用父组件的方法 执行submit的逻辑
    emit('confirm')
}
defineExpose({ open, cancel })

</script>

<style lang="scss" scoped>
.delete_box {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99999;


    .bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.5;
        top: 0;
        left: 0;
    }

    .delete_model {
        position: absolute;
        background-color: #fff;
        text-align: center;
        width: 518rpx;
        // height: 386rpx;
        top: calc(50% - (386rpx / 2));
        left: calc(50% - (518rpx / 2));

        .text {
            // padding: 20rpx;
            min-height: 140rpx;
        }

        .btn_model {
            margin-bottom: 30rpx;

            .btn {
                width: 184rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 20rpx;
                font-size: 28rpx;
                color: #333;
                background-color: #F8F8F8;
            }

            .sunbmit {
                background-color: #333;
                color: #DBF046;
            }
        }
    }

}
</style>